Skip to main content link. Accesskey S
  • Help
  • HCL Logo
  • HCL Notes and Domino Application Development wiki
  • THIS WIKI IS READ-ONLY. Individual names altered for privacy purposes.
  • HCL Forums and Blogs
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • API Documentation
Search
Community Articles > Japanese - 日本語 > XPagesとjQueryMoileでモバイル用メニュー紹介アプリを作ってみよう
  • Share Show Menu▼
  • Subscribe Show Menu▼

Recent articles by this author

Community articleXPagesとjQueryMoileでモバイル用メニュー紹介アプリを作ってみよう
Added by ~Miriam Quettoomannivu | Edited by ~Miriam Quettoomannivu on May 16, 2013 | Version 3
expanded Abstract
collapsed Abstract
No abstract provided.
ShowTable of Contents
HideTable of Contents
  • 1 1.はじめに(完成形と効果)
  • 2 2.準備する物
  • 3 3.作成するXPagesファイルの構成
  • 4 4.jQueryMobileをNSFファイルに組み込む
  • 5 5.XPagesにjQueryMobileを組み込む
  • 6 6.1ページ目:ビューのカテゴリを表示する①
  • 7 7.2ページ目:ビューのカテゴリを表示する②
  • 8 8.3ページ目:ビューの文書を表示する
  • 9 9.4ページ目:フォームを表示する
  • 10 10.戻るボタンを作る

1.はじめに(完成形と効果)

ノーツのカテゴリと添付ファイルを表示するモバイルメニュー紹介アプリです。

2.準備する物

  • テキストフィールドと画像添付用のリッチテキストフィールド、添付された画像のファイル名を計算する複数値可能フィールドを配置します。

  • ビューは2段階のカテゴリを付けたビューです。

  • データは適当に項目を入力し、画像ファイルを添付しておきます。

 

3.作成するXPagesファイルの構成

下記の4つのXpagesを作成します。

Xpagesの名前

内容

cate1.xsp

1ページ目

リスト(ビュー)表示。カテゴリ1階層目。

cate2.xsp

2ページ目

リスト(ビュー)表示。カテゴリ2階層目。

cate3.xsp

3ページ目

リスト(ビュー)表示。イメージと文書を表示。

frm.xsp

4ページ目

フォーム表示。

 

 

4.jQueryMobileをNSFファイルに組み込む

1.jQueryのHPからjQueryとjQueryMobileをダウンロードします。

種類

URL

内容

JavaScriptライブラリ

http://code.jquery.com/jquery-1.9.1.min.js

jQuery本体

一括ダウンロード用

圧縮ファイル

http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.zip

 

jQueryMobile本体

jQueryMobileCSS

画像などリソースファイル

※バージョンが変わっている場合はこちらから

http://jquery.com/download/

http://jquerymobile.com/download/

 

2.ダウンロードしたjquery.mobile-1.3.0.zipを適当なフォルダに解凍します。

 

3.jQueryを組み込みたいノーツアプリケーションを開き、設計要素から「リソース-ファイル」を開きます。

 

4.[ファイルリソースのインポート]ボタンを押し、ダウンロードしたjQuery、jQueryMobileを登録します。

種類

ファイル名

補足

JavaScriptライブラリ

jquery-1.9.1.min.js

 

JavaScriptライブラリ

jquery.mobile-1.3.0.min.js

 

jquery.mobile-1.3.0.zipを解凍したファイル

スタイルシート

jquery.mobile-1.3.0.min.css

jquery.mobile-1.3.0.zipを解凍したファイル

【イメージ】

 

5.jquery.mobile-1.3.0.zipを解凍したフォルダから画像ファイルをイメージリソースに登録します。

標準ではpngファイルが選択できないので、ファイル名に「*.*」と入力し、全てのファイルを表示させます。

取り込んだファイルにはフォルダ名がつかないので、名前の変更を使ってファイル名の前に「images/」というパスを追加します。

フォルダ

ファイル名(ファイルシステム)

インポート後の名前(イメージリソース)

images

ajax-loader.gif

images /ajax-loader.gif

images

icons-18-black.png

images /icons-18-black.png

images

icons-18-white.png

images /icons-18-white.png

images

icons-36-black.png

images /icons-36-black.png

images

icons-36-white.png

images /icons-36-white.png

【イメージ】

 

 

5.XPagesにjQueryMobileを組み込む

  • 新規Xpagesを作成し、ソースタブにjquery moibileを組み込むためのタグを書き込みます。Xpagesのプロパティ-リソースからファイルを順番に選択しても同様の操作が可能です。

【XPagesソース】

<xp:this.resources

 

        <xp:script src="/jquery-1.9.1.min.js" clientSide="true"

 
xp:script
 

        <xp:script src="/jquery.mobile-1.3.0.min.js"

                clientSide="true"

 

        xp:script

 

        <xp:styleSheet href="/jquery.mobile-1.3.0.min.css"

 
xp:styleSheet
 

xp:this.resources

 

【イメージ】

 

 

6.1ページ目:ビューのカテゴリを表示する①

1.データリソースとしてカテゴリのビューを登録します。

【イメージ】

 

2.1ページ目はカテゴリのみ表示するため、データソースプロパティの「expandLevel」に“1”を指定します。

【イメージ】

 

3.XpagesのソースにjQueryMobileでヘッダー、コンテンツの基本構文となるタグを入力します。(データソースが指定してあるタグの下)

【XPagesソース】

<div data-role="page"

 

       

        <div data-role="header"

 

        div

 

               

       

        <div data-role="contents"

 

        div

 

div

 

【イメージ】

 

4.テーマカラーを変更したい場合には、divタグに「data-theme」を指定します。

【XPagesソース】

<div data-role="page" data-theme="b"

 

 

5.ヘッダータグに内容を設定します。

【XPagesソース】

<div data-role="header"

 

        <h1

 
分類h1
 

div

 

 

6.コンテンツの中に

    タグを配置し、ListViewを作ります。

【XPagesソース】

<div data-role="contents"

 

        <ul data-role="listview"

 

                       

        ul

 

div

 

【イメージ】

 

7.右のコンテナコントロールから繰り返しコントロールをドラッグ&ドロップでListViewタグの下に配置し、繰り返しコントロールの名前(デフォルトはrepeat1を消します。(名前が残っているとjquery mobileのスタイルが反映されません。)

【XPagesソース】

<div data-role="contents"

 

        <ul data-role="listview"

 

                <xp:repeat rows="30" value="#{view1}"

 

 

xp:repeat

 

        ul

 

div

 

 

8.ページ替えをさせないため、オプションの繰り返し頻度には大きな値を入れ(例では9999)、コレクション名に「dataRow」と設定します。

【イメージ】

 

9.

  • タグを入れます。
  • 【XPagesソース】

    <ul data-role="listview"

     

            <xp:repeat rows="9999" value="#{view1}"

     

                    <li

     

                                                   

                    li

     

    xp:repeat

     

    ul

     

     

    9.右のコアコントロールからリンクコントロールをドラッグ&ドロップで

  • タグの下に配置し、ラベルを消します。
  • 【XPagesソース】

    <xp:repeat value="#{view1}" var="dataRow" rows="9999"

     

           <li

     

                  <xp:link escape="true" id="link1"

     

     

    xp:link

     

           li

     

    xp:repeat

     

     

    10.右のコアコントロールから計算結果フィールドをドラッグ&ドロップでリンクコントロールの下に配置します。

    【XPagesソース】

    <li

     

           <xp:link escape="true" id="link1"

     

                  <xp:text escape="true"

                         id="computedField1"

     

                  xp:text

     

           xp:link

     

    li

     

     

    11.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、2ページ目のXpagesを指定し、URL引数にcategoryFillterを設定します。

    【SSJSソース】

    "/cate2.xsp?OpenXpage&categoryFilter=" + dataRow.getColumnValues().get(0)

    【イメージ】

     

    11.計算結果フィールドを選択し、値-使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する式を書き込みます。

    【SSJSソース】

    dataRow.isCategory() ? dataRow.getColumnValues().get(0) : null

    【イメージ】

     

    12.スマートフォンの画面にあわせるため、サイズをデバイスの幅に指定するHTMLをXPagesソースに書き込みます。(データソース指定の下あたり)

    【XPagesソース】

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    【イメージ】

     

     

    7.2ページ目:ビューのカテゴリを表示する②

    1.1ページ目(cate1.xsp)をコピーし、2ページ目(cate2.xsp)にリネームします。

     

    2.2ページ目のXPagesを開き、ソースタブでヘッダーの内容を変更します。

    【XPagesソース】

    <div data-role="header"

     

            <h1

     
    種別h1
     

    div

     

     

    2.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、3ページ目のXpagesを指定し、URL引数にcategoryFillterを設定します。(URL引数から1階層目、クリックした列から2階層目を取得)

    【SSJSソース】

    "/cate3.xsp?OpenXpage&categoryFilter=" + param.get("categoryFilter") + "\\" + dataRow.getColumnValues().get(1)

    【イメージ】

     

    3.計算結果フィールドを選択し、値-使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する式を書き込みます。(2列目を取得)

    【SSJSソース】

    dataRow.isCategory() ? dataRow.getColumnValues().get(1) : null

    【イメージ】

     

     

    8.3ページ目:ビューの文書を表示する

    1.1ページ目(cate1.xsp)をコピーし、3ページ目(cate3.xsp)にリネームします。

     

    2.3ページ目のXPagesを開き、ソースタブでヘッダーの内容を変更します。

    【XPagesソース】

    <div data-role="header"

     

            <h1

     
    メニューh1
     

    div

     

     

    3.リンクコントロールを選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、4ページ目のXpagesを指定し、URL引数にdocumentIdを設定します。

    【SSJSソース】

    "/frm.xsp?OpenXpage&documentId="+dataRow.getDocument().getUniversalID();

    【イメージ】

     

    4.リンクコントロールを選択し、オプション-リンクイメージを追加にチェックを付け、イメージの横にある◇をクリックし、添付ファイル画像を表示する式を書き込みます。(表示される添付ファイルは一つ目)

    【SSJSソース】

    "/"+dataRow.getDocument().getUniversalID()+"/$File/"+@Subset(dataRow.getDocument().getItemValue("ImageFileNameList"),1)

    【イメージ】

     

    4.計算結果フィールドを選択し、値で単純データバインディングを選択肢、データソース「dataRow」、バインド先「Subject(件名)」を選択します。(dataRowは繰り返しコントロールのコレクション名)

    【XPagesソース】

    <xp:text escape="true" id="computedField1"

            value="#{dataRow.Subject}"

     

    xp:text

     

    【イメージ】

     

    5.右のコアコントロールから計算結果フィールドをドラッグ&ドロップで品名用の計算結果フィールドの下に配置し、単純データバインディングでデータソース「dataRow」、バインド先「Price(金額)」を選択します。

    【XPagesソース】

    <xp:text escape="true" id="computedField2"

            value="#{dataRow.Price}"

     

    xp:text

     

     

    6.体裁を整えるために、品名用の計算結果フィールドを{

    }タグで囲い、金額用の計算結果フィールドを{

    }タグで囲います。

    【XPagesソース】

    <h1

     

    <xp:text escape="true" id="computedField1"

                  value="#{dataRow.Subject}"

     

           xp:text

     

    h1

     

    <p

     

           <xp:text escape="true" id="computedField2"

                  value="#{dataRow.Price}"

     

           xp:text

     

    p

     

     

    7.必要に応じて、計算結果フィールドの値の表示タイプやスタイルを変更して下さい。

     

     

    9.4ページ目:フォームを表示する

    1.1ページ目(cate1.xsp)をコピーし、4ページ目(frm.xsp)にリネームします。

     

    2.4ページ目のXPagesを開き、データソースを選択、Dominoビューのデータソースを削除し、Domino文書のデータソースを追加。フォームを選択し、デフォルトアクションには「文書を開く」を選択します。

    【イメージ】

     

    3.ソースタブでヘッダーの内容を変更します。

    【XPagesソース】

    <div data-role="header"

     

            <h1

     
    詳細h1
     

    div

     

     

    4.繰り返しコントロールと、その中に挟まれたXPagesソースを削除します。

     

    5.Listviewの中に

  • タグを配置し、計算結果フィールドで「Subject(品名)」と「Price(金額)」を表示します。
  • 【XPagesソース】

    <ul data-role="listview"

     

           <li

     

                 

                  <h1

     

                         <xp:text escape="true" id="computedField1"

                                value="#{document1.Subject}"

     

                         xp:text

     

                  h1

     

                 

                  <p

     

                  価格:

                  <xp:text escape="true" id="computedField2"

                         value="#{document1.Price}"

     

                  xp:text

     

                  p

     

           li

     

    ul

     

     

    6.Listviewの下に繰り返しコントロールを配置します。(複数の添付ファイル画像を表示するため)

     

    7.繰り返しコントロールを選択し、名前を削除、単純データバインディングで添付ファイル名の入っているフィールドを選択する。コレクション名には「filelist」と入力します。

    【Xpagesソース】

    <xp:repeat rows="30" value="#{document1.ImageFileNameList}"

           var="filelist"

     

    xp:repeat

     

    【イメージ】

     

    繰り返しコントロールのタグ内にイメージコントロールを配置し、イメージリソースに添付ファイルを読み込むコードを書き込みます。(一番後ろの「filelist」は繰り返しコントロールのコレクション名)

    【SSJSソース】

    "/"+document1.getDocument().getUniversalID()+"/$File/"+filelist

    【イメージ】

     

     

    10.戻るボタンを作る

    • ヘッダー部分に戻るボタンを追加するには、2ページ目以降のpageコントロールを下記のように書き換えます。

    【Xpagesソース】

    <div data-role="page" data-add-back-btn="true" data-theme="b"

     

          

           <div data-role="header"

     

                  <a href="" data-rel="back"

     
    戻るa
     

                  <h1

     
    種別h1
     

           div

     

     

    expanded Attachments (0)
    collapsed Attachments (0)
    expanded Versions (15)
    collapsed Versions (15)
    Version Comparison     
    VersionDateChanged by              Summary of changes
    15May 21, 2013, 11:03:18 AM~Rebecca Umkipuljip  
    14May 21, 2013, 11:02:36 AM~Miriam Quettoomannivu  
    13May 21, 2013, 11:01:51 AM~Miriam Quettoomannivu  
    12May 21, 2013, 2:23:30 AM~Miriam Quettoomannivu  
    11May 20, 2013, 10:55:20 AM~Miriam Quettoomannivu  
    10May 20, 2013, 10:49:57 AM~Miriam Quettoomannivu  
    9May 16, 2013, 3:21:15 PM~Miriam Quettoomannivu  
    8May 16, 2013, 3:19:19 PM~Miriam Quettoomannivu  
    7May 16, 2013, 12:14:22 PM~Miriam Quettoomannivu  
    6May 16, 2013, 12:10:27 PM~Miriam Quettoomannivu  
    5May 16, 2013, 12:06:41 PM~Miriam Quettoomannivu  
    4May 16, 2013, 11:54:44 AM~Miriam Quettoomannivu  
    This version (3)May 16, 2013, 11:53:00 AM~Miriam Quettoomannivu  
    2May 16, 2013, 11:47:02 AM~Miriam Quettoomannivu  
    1May 16, 2013, 11:42:22 AM~Miriam Quettoomannivu  
    Copy and paste this wiki markup to link to this article from another article in this wiki.
    Go ElsewhereStay ConnectedAbout
    • HCL Software
    • HCL Digital Solutions community
    • HCL Software support
    • BlogsDigital Solutions blog
    • Community LinkHCL Software forums and blogs
    • About HCL
    • Privacy
    • Accessibility